<template>
	
	<view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/szmmbg.png)`, }">
		<u-navbar
          :title="设置密码"
          leftIconColor="#ffffff"
		  :autoBack="true" 
		:bgColor="bgColor" 
		:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
      >
      </u-navbar>
		<view class="top">
			<view class="title">设置登陆密码</view>
			<text>设置密码后，您可以使用密码登录</text>
		</view>
		<view class="middle  ">
			<view class="passwrap">
				<!-- <view class="phone">已绑定手机号：188****2222</view> -->
				<view class="content">

					<uni-forms ref="resetPasswordRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind">

						<uni-forms-item name="code" label="验证码">
							<uni-easyinput placeholder="请输入验证码" v-model="state.formData.code" :inputBorder="false"
								type="number" maxlength="4"> <template v-slot:right>
									<button class="ss-reset-button code-btn code-btn-start"
										:disabled="state.isMobileEnd" :class="{ 'code-btn-end': state.isMobileEnd }"
										@tap="getSmsCode('smsRegister', state.formData.mobile)">
										{{ getSmsTimer('smsRegister') }}
									</button>
								</template>
							</uni-easyinput>
						</uni-forms-item>

						<uni-forms-item name="password" label="设置密码">
							<uni-easyinput type="password" placeholder="请输入密码" v-model="state.formData.password"
								:inputBorder="false">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="confirmPwd" label="确认密码">
							<uni-easyinput type="password" placeholder="请再次输入密码" v-model="state.formData.confirmPwd"
								:inputBorder="false">
							</uni-easyinput>
						</uni-forms-item>
						<button class="submit" @tap="resetPasswordSubmit"> 立即修改 </button>
					</uni-forms>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { ref, reactive, unref,computed } from 'vue';
import { code, password, confirmPwd } from '@/sheep/validate/form';
import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
const resetPasswordRef = ref(null);
// 数据
const state = reactive({
	isMobileEnd: false, // 手机号输入完毕
	formData: {
		code: '', // 验证码
		password: '', // 密码
		confirmPwd: '',//确认密码
	},
	rules: {
		code,
		password,
		confirmPwd
	},
});
const isLogin = computed(() => sheep.$store('user').isLogin);
const bgColor = ref('#fff0')
// 4.重置密码
const resetPasswordSubmit = async () => {
	const validate = await unref(resetPasswordRef)
		.validate()
		.catch((error) => {
		});
	if (!validate) return;
	

	uni.showToast({
		title: '修改成功',
		icon: "none"
	});
	sheep.$api.user.resetPassword(state.formData).then((res) => {
	  if (res.code === 1) {
	    sheep.$store('user').getInfo();
	  
	  }
	});
};

</script>

<style lang="scss" scoped>
@import '../auth/components/login.scss';
.middle{
	background: transparent;
	height: auto;
}

.passwrap {
	width: 94%;
	border-radius: 20rpx 20rpx 0 0;
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
	background: $uni-bg-color;
	min-height: 920rpx;
	margin: 0 auto;

	.phone {
		border-radius: 20rpx 20rpx 0 0;
		height: 104rpx;
		line-height: 104rpx;
		padding-left: 40rpx;
		font-family: PingFangSC;
		color: $uni-text-color;
		font-weight: $uni-font-weight;
		font-size: $uni-font-size-big;
		background: #F4F6FA;
	}

	:deep(.uni-forms-item.is-direction-left){
		flex-direction: column;
		position: relative;
		margin-bottom: 30rpx !important;
		.uni-forms-item__label{
			width: 100% !important;
		color: $uni-text-color !important;
		font-weight: 500 !important;
		font-size: 28rpx !important;
		height: 80rpx !important;
		line-height: 80rpx !important;}
		.uni-forms-item__error {
			right: 6rpx !important;
			left: auto !important;
		}
	}	
	:deep(.uni-easyinput__content-input){
		height: 88rpx !important;
		border-radius: 8px;
		background-color: #F4F6FA;
		width: 96%;
		line-height: 90rpx;
		color: #333;
		font-size: $uni-font-size-base;
		padding-left: 20rpx;}
		.code-btn-start{
			position: absolute;
		right: 14rpx;
		width: 200rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: $uni-font-size-base;
		color: $uni-bg-color;
		border-radius: 32rpx;
		z-index: 99;
		background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
		border: none;
		}

  }
  


</style>